<template>
  <div>
    <div class="form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="330px" class="demo-ruleForm">
        <!-- 修改 prop 属性为 litemall_order_unpaid -->
        <el-form-item label="用户下单后超时" prop="litemall_order_unpaid">
          <el-input v-model="ruleForm.litemall_order_unpaid" size="mini" style="width: 448px;">
            <template slot="append">分钟</template>
          </el-input>
          <span class="text">用户未付款，则订单自动取消</span>
        </el-form-item>
        <!-- 修改 prop 属性为 litemall_order_unconfirm -->
        <el-form-item label="订单发货后超期" prop="litemall_order_unconfirm">
          <el-input v-model="ruleForm.litemall_order_unconfirm" size="mini" style="width: 448px;">
            <template slot="append">天</template>
          </el-input>
          <span class="text">未确认收货，则订单自动确认收货</span>
        </el-form-item>
        <!-- 修改 prop 属性为 litemall_order_comment -->
        <el-form-item label="确认收货后超期" prop="litemall_order_comment">
          <el-input v-model="ruleForm.litemall_order_comment" size="mini" style="width: 448px;">
            <template slot="append">天</template>
          </el-input>
          <span class="text">未评价商品，则取消评价资格</span>
        </el-form-item>
        <el-form-item label="">
          <el-row>
            <el-button size="mini" @click="show">取消</el-button>
            <el-button type="primary" @click="change" size="mini">确定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { yonghu, yonghu2 } from '@/api/pzgl/ddpz.js';
export default {
  name: 'DocumentsOrder',

  data() {
    return {
      ruleForm: {
        litemall_order_unpaid: '',
        litemall_order_unconfirm: "",
        litemall_order_comment: "",
      },
      rules: {
        // 为 litemall_order_unpaid 添加验证规则
        litemall_order_unpaid: [
          { required: true, message: '请输入用户下单后超时时间', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_order_unconfirm 添加验证规则
        litemall_order_unconfirm: [
          { required: true, message: '请输入订单发货后超期时间', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_order_comment 添加验证规则
        litemall_order_comment: [
          { required: true, message: '请输入确认收货后超期时间', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ]
      }
    };
  },

  mounted() {
    this.show()
  },

  methods: {
    change() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          yonghu2({
            ...this.ruleForm
          }).then((res) => {
            console.log(res);
          })
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    show() {
      yonghu()
        .then((res) => {
          console.log(res);
          this.ruleForm.litemall_order_unpaid = res.data.litemall_order_unpaid
          this.ruleForm.litemall_order_unconfirm = res.data.litemall_order_unconfirm
          this.ruleForm.litemall_order_comment = res.data.litemall_order_comment
        })
    },
    // 自定义验证函数，验证输入是否为正整数
    validateNumber(rule, value, callback) {
      if (/^\d+$/.test(value) && parseInt(value) > 0) {
        callback();
      } else {
        callback(new Error('请输入正整数'));
      }
    }
  },
};
</script>
<style scoped>
::v-deep .el-form-item__content .el-input-group {
  /* vertical-align: top; */
  padding-top: 7px;
}

.text {
  margin-left: 10px;
}
</style>